import { Outlet, useNavigate, useLocation } from 'react-router-dom'
import { Layout, Menu, Button, Avatar, Dropdown, message } from 'antd'
import { useState, useEffect } from 'react'
import { useUserStore } from '../store/user.js'
import './AdminLayout.css'
import {
    DashboardOutlined,
    UserOutlined,
    BookOutlined,
    SettingOutlined,
    LogoutOutlined,
    MenuFoldOutlined,
    MenuUnfoldOutlined,
    CrownOutlined
} from '@ant-design/icons'

const { Header, Sider, Content } = Layout

export default function AdminLayout() {
    const [collapsed, setCollapsed] = useState(false)
    const [messageApi, contextHolder] = message.useMessage()
    const navigate = useNavigate()
    const location = useLocation()
    const user = useUserStore(state => state.user)
    const logout = useUserStore(state => state.logout)

    // 检查管理员权限
    useEffect(() => {
        if (!user || user.userRole !== 'admin') {
            messageApi.error('请先登录管理员账号')
            navigate('/admin/login')
        }
    }, [user, navigate, messageApi])

    // 菜单项配置
    const menuItems = [
        {
            key: '/admin/dashboard',
            icon: <DashboardOutlined />,
            label: '仪表盘',
        },
        {
            key: '/admin/users',
            icon: <UserOutlined />,
            label: '用户管理',
        },
        {
            key: '/admin/templates',
            icon: <BookOutlined />,
            label: '模板管理',
        },
        {
            key: '/admin/settings',
            icon: <SettingOutlined />,
            label: '系统设置',
        },
    ]

    // 处理菜单点击
    const handleMenuClick = ({ key }) => {
        navigate(key)
    }

    // 处理退出登录
    const handleLogout = () => {
        logout()
        messageApi.success('已退出管理系统')
        setTimeout(() => {
            navigate('/admin/login')
        }, 1000)
    }

    // 用户下拉菜单
    const userMenuItems = [
        {
            key: 'settings',
            icon: <SettingOutlined />,
            label: '账号设置',
            onClick: () => navigate('/admin/account-settings')
        },
        {
            type: 'divider',
        },
        {
            key: 'logout',
            icon: <LogoutOutlined />,
            label: '退出登录',
            onClick: handleLogout
        },
    ]

    if (!user || user.userRole !== 'admin') {
        return null
    }

    return (
        <Layout className="admin-layout">
            {contextHolder}
            
            {/* 侧边栏 */}
            <Sider 
                trigger={null} 
                collapsible 
                collapsed={collapsed}
                className="admin-sider"
                width={240}
                collapsedWidth={80}
            >
                <div className="admin-logo">
                    <CrownOutlined className="logo-icon" />
                    {!collapsed && <span className="logo-text">管理系统</span>}
                </div>
                
                <Menu
                    theme="dark"
                    mode="inline"
                    selectedKeys={[location.pathname]}
                    items={menuItems}
                    onClick={handleMenuClick}
                    className="admin-menu"
                />
            </Sider>

            {/* 主要内容区域 */}
            <Layout className="admin-main">
                {/* 顶部导航栏 */}
                <Header className="admin-header">
                    <div className="header-left">
                        <Button
                            type="text"
                            icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
                            onClick={() => setCollapsed(!collapsed)}
                            className="collapse-btn"
                        />
                        <div className="breadcrumb">
                            <span className="breadcrumb-title">
                                {menuItems.find(item => item.key === location.pathname)?.label || '管理系统'}
                            </span>
                        </div>
                    </div>
                    
                    <div className="header-right">
                        <Dropdown
                            menu={{ items: userMenuItems }}
                            placement="bottomRight"
                            arrow
                        >
                            <div className="user-info">
                                <Avatar 
                                    src={user.userAvatar} 
                                    icon={<UserOutlined />}
                                    className="user-avatar"
                                />
                                <span className="user-name">{user.userName || user.userAccount}</span>
                                <span className="user-role">管理员</span>
                            </div>
                        </Dropdown>
                    </div>
                </Header>

                {/* 内容区域 */}
                <Content className="admin-content">
                    <div className="content-wrapper">
                        <Outlet />
                    </div>
                </Content>
            </Layout>
        </Layout>
    )
}
